<template>
  <div class="groupGoods">
    <div class="search_bar">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="box">
            <div class="search_title">拼团状态</div>
            <el-select
              @change="pageChange(1)"
              v-model="groupClass"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="box">
            <div class="search_title">商品搜索：</div>
            <el-input v-model="groupKeyowrd" placeholder="搜索"></el-input>
          </div>
        </el-col>
        <el-col :span="8" style="text-align: right">
          <el-button type="primary" style="text-align: right" @click="goAdd()"
            >添加拼团商品</el-button
          >
        </el-col>
      </el-row>
    </div>
    <el-table :data="groupData" style="width: 100%">
      <el-table-column prop="id" label="序号" width="130"> </el-table-column>
      <el-table-column prop="img" label="拼团图片" width="170">
        <template slot-scope="scope">
          <img :src="scope.row.img" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="名称和简介" class="itemBox">
        <template slot-scope="scope">
          <p style="font-size:14px;font-weight:bold;">
            {{ scope.row.children.title }}
          </p>
          <p style="font-size:14px;font-weight:bold;">
            {{ scope.row.children.num }}
          </p>
          <p style="font-size:14px; color:#ccc;">
            x{{ scope.row.children.price }}
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="groupPrice" label="拼团价"> </el-table-column>
      <el-table-column prop="joinPeople" label="拼团人数" width="260">
      </el-table-column>
      <el-table-column prop="numPeople" label="参与人数" width="240">
      </el-table-column>
      <el-table-column prop="flag" label="拼团状态" width="220">
        <template slot-scope="scope">
          <el-switch
            :value="scope.row.flag === 1"
            @input="setFlag($event, scope.row)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="230">
        <template>
          <el-button type="text" size="small"> 编辑 </el-button>
          <el-button type="text" size="small"> 删除 </el-button>
          <el-button type="text" size="small"> 更多 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page="pageIndex"
        :page-size="pageSize"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      groupData: [],
      groupKeyowrd: "",
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      loadingBool: false,
      groupClass: null,
      options: [
        { value: 1, label: "开启" },
        { value: 2, label: "关闭" }
      ]
    };
  },
  methods: {
    goAdd() {
      this.$router.push("/One");
    },
    setFlag(flag, row) {
      setTimeout(() => {
        row.flag = flag ? 1 : 0;
      }, 100);
    },
    pageChange(ind) {
      this.loadingBool = true;
      this.pageIndex = ind;
      this.$api
        .groupShop({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          classId: this.groupClass,
          keyword: this.groupKeyowrd // 关键字
        })
        .then(res => {
          if (res.code === 1) {
            // 赋值数据
            this.groupData = res.data;
            this.total = res.total;
          }
          this.loadingBool = false;
        });
    },
    handleClick() {
      this.pageChange(1);
      console.log(1);
    }
  },
  created() {
    this.pageChange(1);
  },
  filters: {
    timeToDate(value) {
      return new Date(value.split(" ")[0]).toLocaleString()
    }
  },
  watch: {
    commodityKeyowrd() {
      // 什么防抖 防止函数抖动
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.pageChange(1);
      }, 700);
    }
  }
};
</script>

<style lang="scss">
@import "@css/style.scss";
.Barteringgoods {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  padding: 20px;
  .search_bar {
    width: 100%;
    padding: 10px;
    .box {
      width: 100%;
      display: flex;
      .search_title {
        padding: 0 10px;
        white-space: nowrap;
        line-height: 40px;
      }
      &:nth-child(2) {
        flex: 1;
      }
    }
  }
  .footer {
    width: 100%;
    padding: 15px;
    text-align: center;
  }
}
</style>
